<template>
  <mt-tabbar fixed class="tab" v-show="isShowTabbar">
        <mt-tab-item id="阅读" :class="{'active':readColor}"  @click.native="changeToPath('home')">
            <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-shu.png" v-if="!readColor">
            <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-shu-light.png" v-else>
            热点
        </mt-tab-item>
        <mt-tab-item id="订阅" :class="{'active':orderColor}"  @click.native="changeToPath('order')">
            <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-dingyue.png"  v-if="!orderColor">
            <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-dingyue-light.png" v-else>
            订阅
        </mt-tab-item>
        <mt-tab-item id="我的" :class="{'active':renColor}"  @click.native="changeToPath('account')">
            <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-wode.png"  v-if="!renColor">
            <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-wode-light.png" v-else>
            我的
        </mt-tab-item>
    </mt-tabbar>
</template>

<script>
export default {  
    data(){
      return{
        readColor : true,
        orderColor : false,
        renColor : false,
      }
    },
    computed: {
      isShowTabbar () {
        if( this.$route.name == 'home' || this.$route.name == 'order' || this.$route.name == 'account' ){
          return true;
        }else{
          return false;
        } 
      }
    },
    mounted(){
      if( this.$route.name == 'home' ){
        this.homeClass();
      }
      if( this.$route.name == 'order' ){
        this.orderClass();
      }
      if( this.$route.name == 'account' ){
        this.accountClass();
      }
    },
    watch:{
      '$route'(to, from){
        if( to.name == 'home' ){
          this.homeClass();
        }
        if( to.name == 'order' ){
          this.orderClass();
        }
        if( to.name == 'account' ){
          this.accountClass();
        }
      }
    },
    methods:{
      changeToPath(name){
        this.$router.push({path:`/${name}`}); 
      },
      homeClass(){
        this.readColor = true;     
        this.orderColor = false;
        this.renColor = false;
      },
      orderClass(){
        this.readColor = false;     
        this.orderColor = true;
        this.renColor = false; 
      },
      accountClass(){
        this.readColor = false;     
        this.orderColor = false;
        this.renColor = true; 
      }
    }
}
</script>

<style lang="stylus" scoped>
.tab{
  max-width:750px;
  height:50px;
  margin:0 auto;
  border-top: 1px solid #e3e3e3;
  background: #fff;
  img{
    width:23px;
    height:23px;
  }
}
</style>